import React, { Component } from 'react'
import './Coupon.less'
import Header from '../../components/Header/Header'
import { reqgetcoupon } from '../../http/api'
import { Tabs ,Toast} from 'antd-mobile'
import time from 'time-formater'
export default class Coupon extends Component {
  constructor() {
    super()
    this.state = {
      list: [],
      n: 1,
    }
    this.cateArr = ['可使用', '已使用', '已过期']
  }
  componentDidMount() {
    this.getList();
  }
  async getList() {
    let { data: res } = await reqgetcoupon();
    if (res.code === 200) {
      let arr0 = res.list[0].content ? res.list[0].content : [];
      let arr1 = res.list[1].content ? res.list[1].content : [];
      let arr2 = res.list[2].content ? res.list[2].content : [];
      this.setState({
        list: [arr0, arr1, arr2]
      });
    }
  }
  render() {
    let { list } = this.state
    return (
      <div className='coupon'>
        <Header back title="优惠券"></Header>
        <Tabs>
          {this.cateArr.map((item, index) => {
            return (<Tabs.Tab title={item} key={index}>
              {/* {JSON.stringify(list[index])} */}
              {list.length > 0 ? list[index].map(i => (<div className={index === 0  ?'item': 'item overdue'} key={i.id} onClick={()=>{
                if(index !== 0){
                  Toast.show({content:'该优惠券已使用或已过期'});
                  return;
                }
                this.props.history.push({pathname:'/index/shop',state:{couponInfo:i}})
              }}>
                <div className="title">{i.title}</div>
                <div className="limit">满{i.limit_money}减{i.money}</div>
                <div className='desc'>{i.description}</div>
                <div className='time'>有效期：{time(new Date(i.begintime-0)).format('YYYY-MM-DD HH:mm:ss')}-{time(new Date(i.endtime-0)).format('YYYY-MM-DD HH:mm:ss')}</div>
              </div>)) : (<div>暂无数据</div>)}
            </Tabs.Tab>)
          })}
        </Tabs>
      </div>
    )
  }
}
